<!-- main -->
<div class="row">
  <div class="col-sm-12">
      <div class="box box-primary">
          <div class="box-header with-border">
              <div class="box-title">
                  <button class="btn btn-primary" (click)="toggleModel('addModel')">新增</button>
                  <button class="btn btn-primary" (click)="getTeacherList('open',null)">分配导师</button>
              </div>
          </div>
          <!-- 搜索框 -->
          <div class="box-header">
              <form class="form-inline">
                  <div class="form-group search-input-R2">
                      <label for="StitleId">编号</label>
                      <input type="text" id="StitleId" class="form-control" placeholder="题目编号"
                          [(ngModel)]="searchBody.TitleId" name="StitleId">
                  </div>
                  <div class="form-group search-input-R2">
                      <label for="StitleName">题目</label>
                      <input type="text" id="StitleName" class="form-control" placeholder="题目名称"
                          [(ngModel)]="searchBody.TitleName" name="StitleName">
                  </div>
                  <div class="form-group search-input-R2">
                    <label for="SteacherName">导师</label>
                    <input type="text" id="SteacherName" class="form-control" placeholder="导师姓名"
                          [(ngModel)]="searchBody.TeacherName" name="SteacherName">
                  </div>
                  <div class="form-group search-input-R2">
                      <button type="submit" (click)="getTitleList(1)" class="btn btn-primary btn-margin-right">查询</button>
                      <button type="submit" (click)="clearSearch()" class="btn btn-warning">重置</button>
                  </div>
              </form>
          </div>
          <!-- table -->
          <div class="box-body table-scroll-content">
              <table id="titleTable" class="table table-bordered table-hover table-striped table-keep-line">
                  <thead>
                    <tr>
                        <th>
                            <div  class="checkbox checkbox-primary">
                                <input type="checkbox" name="checkall" [(ngModel)]="checkall" (ngModelChange)="checkAll()"><label></label>
                            </div>
                        </th>
                        <th>编号</th>
                        <th>题目</th>
                        <th>选题人学号</th>
                        <th>选题人姓名</th>
                        <th>状态</th>
                        <th>导师工号</th>
                        <th>导师姓名</th>
                        <th>导师系别</th>
                        <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let title of titleList">
                        <td>
                            <div  class="checkbox checkbox-primary">
                                <input type="checkbox" name="checkbox" [(ngModel)]="title.isChecked"><label></label>
                            </div>
                        </td>
                        <td>{{title.TitleId}}</td>
                        <td><a (click)="showTitle(title)" style="text-decoration:underline">{{title.TitleName}}</a></td>
                        <td>{{title.StudentId}}</td>
                        <td>{{title.StudentName}}</td>
                        <!-- <td *ngIf="title.TitleStatus==0" style="color:gray">未被选</td>
                        <td *ngIf="title.TitleStatus==1" style="color:#FF7B00">待确认</td>
                        <td *ngIf="title.TitleStatus==2" style="color:green">已被选</td> -->
                        <td>
                            <span *ngIf="title.TitleStatus==0" style="color:gray">未被选</span>
                            <span *ngIf="title.TitleStatus==1" style="color:#FF7B00">待确认</span>
                            <span *ngIf="title.TitleStatus==2" style="color:green">已被选</span>
                        </td>
                        <td>{{title.TeacherId}}</td>
                        <td>{{title.TeacherName}}</td>
                        <td>{{title.TeacherDepartment}}</td>
                        <td>
                            <button class="btn btn-xs btn-primary" (click)="toggleModel('editModel',title)">编辑</button>
                            <button class="btn btn-xs btn-danger" (click)="delTitle(title)">删除</button>
                        </td>
                    </tr>
                  </tbody>
              </table>
          </div>
          <!-- 底部页面跳转 -->
          <div class="box-footer clearfix">
            <p class="pull-left">每页
                <select [(ngModel)]="searchBody.PageSize" (ngModelChange)="getTitleList(1)" name="pagesize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>个 - 共{{searchBody.Total}}个 - 当前显示第{{searchBody.PageIndex}}页 
            </p>
            <ul class="pagination pagination-sm no-margin pull-right">
                <li (click)="changePage('first',null)"><a>首页</a></li>
                <li (click)="changePage('pre',null)"><a class="fa fa-chevron-left"></a></li>
                <li *ngFor="let item of pages" (click)="changePage('page',item)" [class.active]="searchBody.PageIndex===item"><a>{{item}}</a></li>
                <li (click)="changePage('next',null)"><a class="fa fa-chevron-right"></a></li>
                <li (click)="changePage('last',null)"><a>末页</a></li>
            </ul>
         </div>
      </div>
  </div>
</div>

<!-- 新增模版 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="新增">
  <div class="modal-dialog" role="document">
    <div class="modal-content col-sm-12">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">新增</h4>
      </div>
      <div class="modal-body">
        <form class="form-inline" #addForm="ngForm">
            <div class="form-group add-input col-sm-6">
                <label for="AtitleId">编号</label>
                <input type="text" class="form-control" id="AtitleId" placeholder="题目编号" required
                        [(ngModel)]="addTitleModel.TitleId" name="AtitleId">
              </div>
              <div class="form-group add-input col-sm-6">
                <label for="AtitleName">题目</label>
                <input type="text" class="form-control" id="AtitleName" placeholder="题目名称" required
                        [(ngModel)]="addTitleModel.TitleName" name="AtitleName">
              </div>
              <div class="form-group add-input col-sm-12">
                <label for="AtitleDetail" class="col-sm-12">题目详情</label>
                <textarea id="AtitleDetail" class="col-sm-12" placeholder="题目详情" rows="8"
                        [(ngModel)]="addTitleModel.TitleDetail" name="AtitleDetail">
                </textarea>
              </div>
              <div class="form-group add-input col-sm-12">
                <label for="AtitleRequire" class="col-sm-12">题目要求</label>
                <textarea id="AtitleRequire" class="col-sm-12" placeholder="题目要求" rows="4"
                        [(ngModel)]="addTitleModel.TitleRequire" name="AtitleRequire">
                </textarea>
              </div>
        </form>
      </div>
      <div class="modal-footer col-sm-12">
        <button type="button" class="btn btn-warning pull-left" (click)="clearAddModel()">重置</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" (click)="addTitle()" [disabled]="!addForm.form.valid">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- 编辑模版 -->
<div class="modal fade" id="editModel" tabindex="-2" role="dialog" aria-labelledby="编辑">
  <div class="modal-dialog" role="document">
      <div class="modal-content col-sm-12">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">编辑</h4>
          </div>
          <div class="modal-body">
              <form class="form-inline" #editForm="ngForm">
                  <div class="form-group edit-input col-sm-6">
                      <label for="EtitleId">编号</label>
                      <input type="text" class="form-control" id="EtitleId" placeholder="题目编号" required
                              [(ngModel)]="editTitleModel.TitleId" name="EtitleId">
                  </div>
              
                  <div class="form-group edit-input col-sm-6">
                      <label for="EtitleName">题目</label>
                      <input type="text" class="form-control" id="EtitleName" placeholder="题目名称" required
                              [(ngModel)]="editTitleModel.TitleName" name="EtitleName">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                    <label for="EstudentId">选题人学号</label>
                    <input type="text" class="form-control" id="EstudentId" placeholder="选题人学号"
                            [(ngModel)]="editTitleModel.StudentId" name="EstudentId">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                    <label for="EstudentName">选题人姓名</label>
                    <input type="text" class="form-control" id="EstudentName" placeholder="选题人姓名"
                            [(ngModel)]="editTitleModel.StudentName" name="EstudentName">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                        <label for="EteacherId">导师工号</label>
                        <input type="text" class="form-control" id="EteacherId" placeholder="导师工号"
                                [(ngModel)]="editTitleModel.TeacherId" name="EteacherId">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                        <label for="EteacherName">导师姓名</label>
                        <input type="text" class="form-control" id="EteacherName" placeholder="导师姓名"
                                [(ngModel)]="editTitleModel.TeacherName" name="EteacherName">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                        <label for="EteacherDepartment">导师系别</label>
                        <input type="text" class="form-control" id="EteacherDepartment" placeholder="导师系别"
                                [(ngModel)]="editTitleModel.TeacherDepartment" name="EteacherDepartment">
                  </div>
                  <div class="form-group edit-input col-sm-6">
                        <label for="EtitleStatus">题目状态</label>
                        <select class="form-control" id="EtitleStatus" [(ngModel)]="editTitleModel.TitleStatus" name="EtitleStatus">
                                <option value="0">未被选</option>
                                <option value="1">待确认</option>
                                <option value="2">已被选</option>
                        </select>
                  </div>
                  <div class="form-group edit-input col-sm-12">
                    <label for="EtitleDetail" class="col-sm-12">题目详情</label>
                    <textarea id="EtitleDetail" class="col-sm-12" placeholder="题目详情" rows="8" required
                            [(ngModel)]="editTitleModel.TitleDetail" name="EtitleDetail">
                    </textarea>
                  </div>
                  <div class="form-group edit-input col-sm-12">
                    <label for="EtitleRequire" class="col-sm-12">题目要求</label>
                    <textarea id="EtitleRequire" class="col-sm-12" placeholder="题目要求" rows="4" required
                            [(ngModel)]="editTitleModel.TitleRequire" name="EtitleRequire">
                    </textarea>
                  </div>
              </form>
          </div>
          <div class="modal-footer col-sm-12">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button type="submit" class="btn btn-primary" (click)="editTitle()" [disabled]="!editForm.form.valid">确认</button>
          </div>
      </div>
    </div>
</div>

<!-- 分配模版 -->
<div class="modal fade" id="teachModel" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button (click)="teachClear()" type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">选择导师</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group search-input-R1">
                        <label for="teacherDepartment">系别</label>
                        <input type="text" id="teacherDepartment" class="form-control"
                            [(ngModel)]="teachSearch.TeacherDepartment" name="teacherDepartment">
                    </div>
                    <div class="form-group search-input-R1">
                        <label for="teacherName">姓名</label>
                        <input type="text" id="teacherName" class="form-control"
                            [(ngModel)]="teachSearch.TeacherName" name="teacherName">
                    </div>
                    <div class="form-group search-input-R1">
                        <button type="submit" (click)="getTeacherList(null,1)" class="btn btn-primary">查询</button>
                    </div>
                </form>
                <table class="table table-bordered table-hover table-striped table-keep-line">
                    <thead>
                        <tr>
                            <th>选择</th>
                            <th>系别</th>
                            <th>工号</th>
                            <th>姓名</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let teach of teachList">
                            <td><button class="btn btn-success btn-xs" (click)="selectTeach(teach)">选择</button></td>
                            <td>{{teach.TeacherDepartment}}</td>
                            <td>{{teach.TeacherId}}</td>
                            <td>{{teach.TeacherName}}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="clearfix pull-right">
                    <ul class="pagination pagination-sm no-margin">
                        <li (click)="teachChangePage('first',null)"><a>首页</a></li>
                        <li (click)="teachChangePage('pre',null)"><a class="fa fa-chevron-left"></a></li>
                        <li *ngFor="let item of teachPages" (click)="teachChangePage('page',item)" [class.active]="teachSearch.PageIndex===item"><a>{{item}}</a></li>
                        <li (click)="teachChangePage('next',null)"><a class="fa fa-chevron-right"></a></li>
                        <li (click)="teachChangePage('last',null)"><a>末页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情模版 -->
<div class="modal fade" id="showTitle" tabindex="-1" role="dialog" aria-labelledby="详情">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">题目详情</h4>
            </div>
            <div class="modal-body">
                <span><strong>题目:</strong></span>
                <p>{{showTitleDetail.TitleName}}</p>
                <span><strong>题目详情:</strong></span>
                <p>{{showTitleDetail.TitleDetail}}</p>
                <span><strong>题目要求:</strong></span>
                <p>{{showTitleDetail.TitleRequire}}</p>
            </div>
        </div>
    </div>
</div>